import React, {useEffect, useRef, useState} from "react";
import {createStyles} from "antd-style";
import {getVideoInfo} from "@/api/VideoApi.ts";
import {useVideoIndexStore} from "@/store/BaseStore.ts";

const useStyle = createStyles(({css, token}) => {
    const selected = css`
        .selected {
            background-color: #37375f !important;
        }
    `

    return {
        selectorContainer: css`
            //height: calc(100vh - 100vw * 0.5625);
            height: 60vh;
            display: flex;
            li {
                padding: 8px 10px;
                user-select: none;
                font-size: 20px;

                &:nth-child(2n) {
                    background-color: #323842;
                }

                &:nth-child(2n + 1) {
                    background-color: #282c34;
                }

                &:hover {
                    cursor: pointer;
                    background-color: #3d434f;
                }
            }
        `,
        subMenu: css`
            ${selected};
            flex: 2;
            overflow: hidden;
            overflow-y: auto;
        `,
        rootMenu: css`
            ${selected};
            flex: 1;
            overflow: hidden;
            overflow-y: auto;
        `
    }
})

const VideoSelector: React.FC = () => {
    const [videoList, setVideoList] = useState<any[]>([])
    const {styles} = useStyle();
    const videoContainerIndex = useVideoIndexStore(state => state.videoContainerIndex);
    const videoIndex = useVideoIndexStore(state => state.videoIndex);

    // 让容器索引和播放器脱钩，切换容器索引不会触发播放器重绘
    const [_videoContainerIndex, set_videoContainerIndex] = useState(videoContainerIndex);

    const container = useRef<HTMLDivElement>();

    useEffect(() => {
        set_videoContainerIndex(videoContainerIndex)
        // 获取所有被选择的元素，让被选择的元素滚动到视野中
        const _container = container.current;
        const selectedItemList = _container.querySelectorAll(".selected");
        for (const selectedItem of selectedItemList) {
            if (selectedItem != null) {
                selectedItem.scrollIntoView();
            }
        }
    }, [videoContainerIndex, videoIndex]);

    const set = useVideoIndexStore(state => state.set);

    useEffect(() => {
        // 获取视频列表信息
        getVideoInfo().then((response) => {
            const data = response.data.data
            setVideoList(data)
            set(_videoContainerIndex,
                0,
                data[_videoContainerIndex].videoNameList.length)
        })
    }, []);

    // 视频容器选择列表
    const RootMenu: React.FC = () => {
        return (
            <ul className={styles.rootMenu}>
                {
                    videoList.map((item, index)=> {
                        return (
                            <li key={index}
                                className={index == _videoContainerIndex ? "selected" : null}
                                onClick={() => set_videoContainerIndex(index)}
                            >
                                {item.containerName}
                            </li>
                        )
                    })
                }
            </ul>
        )
    }

    // 容器中的视频选择列表
    const SubMenu: React.FC = () => {
        const element = videoList[_videoContainerIndex];
        let nameList
        if (element != null) {
            nameList = element.videoNameList;
        } else {
            nameList = [];
        }
        return (
            <ul className={styles.subMenu}>
                {
                    nameList.map((item, index) => {
                        return (
                            <li key={index}
                                className={_videoContainerIndex == videoContainerIndex &&
                                            index == videoIndex ? "selected" : null}
                                onClick={() => set(_videoContainerIndex, index, nameList.length)}
                            >
                                {item}
                            </li>
                        )
                    })
                }
            </ul>
        )
    }

    return (
        <div className={styles.selectorContainer} ref={container}>
            <RootMenu/>
            <SubMenu/>
        </div>
    )
}

export default VideoSelector;
